<template>
    <div class="address-add-wrap">
        <CommonHeader teleport=".header" title="新增地址" left-arrow @click-left="$router.back()"></CommonHeader>
        <van-address-edit
            ref="addressAdd"
            :area-list="areaList"
            save-button-text="新增"
            show-set-default
            :area-columns-placeholder="['请选择', '请选择', '请选择']"
            @save="onSave"
            >
        </van-address-edit>
    </div>
</template>

<script setup lang="ts">
    import { ref } from 'vue';
    import { showFailToast, showSuccessToast, showToast } from 'vant';
    import { areaList } from '@vant/area-data';
    import {addAddressAPI} from "@/api/address";

    import { useUserid } from '@/hooks/useUserid';
    import { useRouter } from 'vue-router';

    const {userid} = useUserid(); // ref对象

    const router = useRouter();
    const addressAdd = ref<any>();

    const onSave = async (info:any) =>{
        console.log("点击保存",info);

        // 合并剩余参数 将country以外的数据整合到一起,放到data中
        const {country,...data} = info;

        try{
            let result = await addAddressAPI({
                userid:userid.value,
                ...data,
            })
            console.log("地址新增成功");

            showSuccessToast("新增成功");

            router.push("/address/list");
             
        }catch(err:any){
            showFailToast(err.message);
        }
        

    };
</script>

<style scoped>

</style>